<style lang="scss" scoped>
.permission_wrap {
  width: 100%;
  padding: 20px;
  border: 1px solid rgb(217, 217, 217);
  border-radius: 4px;
  min-height: 200px;
  max-height: 300px;
  overflow-y: auto;
}
</style>
<template>
  <common-modal
    ref="modalRef"
    v-bind="attrs"
    @sure="search"
    @cancel="handleCancel"
    @before-close="reset"
    @open="handleOpen"
  >
    <el-form
      label-width="110px"
      :rules="rules"
      ref="formRef"
      :inline="false"
      :model="formData"
    >
      <el-form-item label="角色名称：" prop="rname">
        <el-input
          v-model="formData.rname"
          placeholder="请输入角色名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="角色描述：" prop="description">
        <el-input
          v-model="formData.description"
          placeholder="请输入角色描述"
          clearable
        />
      </el-form-item>
      <el-form-item label="角色类型：" prop="type">
        <el-radio-group v-model="formData.type">
          <el-radio label="管理">管理角色</el-radio>
          <el-radio label="主体">主体角色</el-radio>
          <el-radio label="投手">投手角色</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item required label="权限管理：" prop="checkMids">
        <div class="permission_wrap">
          <el-tree
            :data="allMenuList"
            show-checkbox
            ref="treeRef"
            @check-change="treeCheckChange"
            node-key="mid"
            :default-checked-keys="defaultCheckKeys"
            :props="defaultProps"
          />
        </div>
      </el-form-item>
      <el-form-item label="状态：" prop="state">
        <el-radio-group v-model="formData.state">
          <el-radio :label="0">禁用</el-radio>
          <el-radio :label="1">正常</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </common-modal>
</template>
<script>
export default {
  inheritAttrs: false,
};
</script>
<script setup>
import { reactive, useAttrs, ref, onMounted, nextTick } from "vue";
import commonModal from "@/components/commonModal.vue";
import useForm from "@/hooks/useForm";
import { ModuleQuery } from "@/apis/module";
import { RoleSave, GetRoleModuleById } from "@/apis/role";
import { ElMessage } from "element-plus";
const props = defineProps({
  type: {
    type: String,
    default: "add",
  },
  curForm: {
    type: [Object, String],
    default: () => ({}),
  },
});
const defaultCheckKeys = ref([]);
const treeRef = ref(null);
const treeCheckChange = () => {
  let checkedMids = [];
  let checkedNodes = treeRef.value?.getCheckedNodes(false, true);
  checkedNodes.forEach(item => {
    checkedMids.push(item.mid);
  });
  formData.checkMids = checkedMids;
};
const attrs = useAttrs();
const formData = reactive({
  id: "",
  state: "",
  checkMids: [],
  description: "",
  rname: "",
  type: "",
});
const allMenuList = ref([]);
const modalRef = ref(null);
// 确定
const emits = defineEmits(["success"]);
const handleSure = async () => {
  await RoleSave({ ...formData });
  ElMessage.success({
    message: "操作成功",
    type: "success",
  });
  emits("success");
  handleCancel();
};
const { formRef, search, reset } = useForm(handleSure);
const rules = {
  rname: [{ required: true, message: "请输入角色名称" }],
  type: [{ required: true, message: "请选择角色类型" }],
  state: [{ required: true, message: "请选择状态" }],
  checkMids: [
    { require: true, message: "请选择角色权限", type: "array", min: 1 },
  ],
};

// 取消 关闭弹窗
const handleCancel = () => {
  modalRef.value?.close();
};

const defaultProps = {
  children: "children",
  label: "mname",
};

onMounted(() => {
  // 查询所有的菜单
  ModuleQuery().then(({ list }) => {
    allMenuList.value = list;
  });
});
// 打开弹窗
const handleOpen = () => {
  const { type, curForm } = props;
  if (type === "add") {
    defaultCheckKeys.value = [];
    Object.assign(formData, {
      id: "",
      state: "",
      checkMids: [],
      description: "",
      rname: "",
      type: "",
    });
  } else {
    Object.assign(formData, curForm);
    GetRoleModuleById(curForm.id).then(res => {
        formData.checkMids = res.checkedIds,
        defaultCheckKeys.value = res.checkedIds
        nextTick(() => {
          treeRef.value?.setChecked(res.checkedMids, true, false)
        })
    })
  }
};
</script>
